<template>
  <ModalTemplate @close="$emit('close')">
    <div slot="header">
      <h2 class="inline">{{ title }}</h2>
      <template v-if="!showAll">
        --
        <a @click="showAllList" v-if="!isAll">查看全部</a>
        <a v-if="!showAll && isAll" @click="backShow">返回</a>
      </template>
      <div class="right">
        <template v-if="isAll">
          <DatePicker
            type="daterange"
            size="small"
            transfer
            @on-change="handleChangeDate"
          ></DatePicker>
          --
        </template>
        <Button type="primary" @click="doExportList">导出</Button>
      </div>
      <div class="clear"></div>
    </div>
    <div class="people-work-list">
      <div
        class="people-work-badge-wrap"
        :class="{ 'people-work-badge-fold': isAll && isFoldBadge }"
      >
        <Icon
          class="peoplework-badge-arrow"
          :size="18"
          :type="
            isFoldBadge ? 'md-arrow-dropdown-circle' : 'md-arrow-dropup-circle'
          "
          v-if="isAll"
          @click.stop="isFoldBadge = !isFoldBadge"
        />
        <Checkbox class="check-badge-fold" v-model="isShowAllBadge" v-if="false"
          >显示全部</Checkbox
        >
        <Badge2
          v-for="(item, index) in badgeQaList"
          :key="'badge_' + index"
          :name="item.name"
          :text="item.length"
          :color="item.length <= 100 ? 'red' : 'green'"
        ></Badge2>
      </div>
      <dl
        v-for="(item, index) in showList"
        :key="'show_' + index"
        :class="{ 'dl-first': index === 0 }"
      >
        <dt>{{ item.title }}</dt>
        <dd v-html="showContent(item.content)"></dd>
      </dl>
      <Spin fix v-if="isLoading"></Spin>
    </div>
    <div slot="footer">
      <span class="left">总数：{{ showList.length }}条</span>
      <Button @click="$emit('close')">返回</Button>
    </div>
  </ModalTemplate>
</template>

<script>
import { splitPerson, format2Html, splitQuetions, saveTXT } from "js/utils.js";
export default {
  props: ["list", "people", "showAll"],
  data() {
    return {
      isLoading: false,
      isAll: false,
      isShowAllBadge: true,
      allList: [],
      dateFilter: ["", ""],
      isFoldBadge: false,
    };
  },
  computed: {
    title() {
      let str = "查看作业";
      if (this.isAll) {
        str = "查看所有作业";
      }
      if (this.people) {
        str += ` - ${this.people.nickname}(${this.people.qq})`;
      }
      return str;
    },
    showList() {
      let list = [];
      if (this.isAll) {
        list = this.allList;
        if (this.dateFilter && this.dateFilter[0] && this.dateFilter[1]) {
          let start = this.dateFilter[0] + " 00:00:00";
          let end = this.dateFilter[1] + " 23:59:59";
          list = list.filter((item) => item.time >= start && item.time <= end);
        }
      } else {
        list = this.list || [];
        list = list.filter((item) => item.content);
      }
      return list;
    },
    badgeQaList() {
      let qaObj = {};
      for (let i = 0, n = this.showList.length; i < n; i++) {
        let item = this.showList[i];
        let qas = [];
        if (item.qas) {
          qas = item.qas;
        } else {
          qas = splitQuetions(item.content);
        }
        for (let j = 0, m = qas.length; j < m; j++) {
          let qa = qas[j];
          qaObj[qa.name] = qa.length;
        }
      }
      let badgeList = [];
      for (let name in qaObj) {
        badgeList.push({
          name: name,
          length: qaObj[name],
        });
      }
      if (!this.isShowAllBadge) {
        badgeList = badgeList.filter((item) => item.length <= 100);
      }
      return badgeList;
    },
  },
  methods: {
    initData() {
      this.isAll = !!this.showAll;
      if (this.isAll) {
        this.getAllWorks();
      }
    },
    async getAllWorks() {
      if (this.allList.length !== 0) {
        return;
      }
      this.isLoading = true;
      let text = await this.$global.getFileText("base");
      if (!text) {
        this.$global.log("请选择大群文件");
        this.isLoading = false;
        return;
      }
      let allList = splitPerson(text);
      let searchList = [];
      let peopleItem = this.people;
      for (let i = 0, n = allList.length; i < n; i++) {
        let item = allList[i];
        let content = allList[i].content;
        if (!content) {
          continue;
        }
        if (item.qq) {
          if (peopleItem.qq !== item.qq) {
            continue;
          }
        } else {
          if (peopleItem.nickname !== item.nickname) {
            continue;
          }
        }
        searchList.push(item);
      }
      this.allList = searchList;
      this.isLoading = false;
    },
    // 查看全部
    showAllList() {
      this.isAll = true;
      this.getAllWorks();
    },
    // 返回
    backShow() {
      this.isAll = false;
    },
    handleChangeDate(dateFilter, type) {
      if (dateFilter && dateFilter.length === 2) {
        this.dateFilter[0] = dateFilter[0];
        this.dateFilter[1] = dateFilter[1];
      } else {
        this.dateFilter[0] = "";
        this.dateFilter[1] = "";
      }
      this.$set(this.dateFilter, 0, this.dateFilter[0]);
      this.$set(this.dateFilter, 1, this.dateFilter[1]);
    },
    // 显示详情
    showContent(content) {
      if (!content) {
        return "";
      }
      let str = content.trim();
      let qas = splitQuetions(str);
      for (let i = 0, n = qas.length; i < n; i++) {
        let question = qas[i].question;
        str = str.replace(question, "<b>" + question + "</b>");
      }
      str = format2Html(str);
      return str;
    },
    // 导出个人聊天记录
    doExportList() {
      let fileName = this.people.nickname + "-聊天记录.txt";
      let str = "";
      for (let i = 0, n = this.showList.length; i < n; i++) {
        let item = this.showList[i];
        str += "\n" + item.title + "\n" + item.content;
      }
      saveTXT(str, fileName);
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style lang="less">
.people-work-badge-wrap {
  width: 100%;
  max-height: initial;
  overflow: hidden;
  position: absolute;
  padding: 4px 20px;
  background-color: #fff;
  .check-badge-fold {
    margin: 2px 4px;
    display: inline-block;
  }
  .peoplework-badge-arrow {
    cursor: pointer;
    transform: translateY(-4px);
  }
  &.people-work-badge-fold {
    max-height: 30px;
  }
}
</style>
